import React from 'react';
import { Link } from 'react-router-dom';
import { IdentityIcon, CredentialIcon, ZKPIcon, RevokeIcon, WalletIcon, IssuerIcon, VerifierIcon } from '../assets/icons';

const HomePage = () => {
  return (
    <div className="home-page">
      {/* 英雄区 */}
      <section className="home-hero">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6 mb-5 mb-lg-0 animate-fade-in">
              <h1 className="hero-title">去中心化学术与职业凭证系统</h1>
              <p className="hero-subtitle">
                让数字凭证更安全、更可信、更隐私
              </p>
              <p className="hero-description text-muted">
                EduVerse Credentials 利用区块链技术与零知识证明，
                为教育机构、企业和个人提供可验证凭证解决方案
              </p>
              <div className="d-flex gap-3 mt-5">
                <Link to="/wallet" className="btn btn-primary btn-lg">
                  开始使用钱包
                </Link>
                <Link to="/issuer" className="btn btn-outline-secondary btn-lg">
                  发行凭证
                </Link>
              </div>
            </div>
            <div className="col-lg-6 d-none d-lg-block">
              <div className="position-relative">
                <div className="hero-image-wrapper">
                  <img 
                    src="https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
                    alt="数字凭证概念图" 
                    className="img-fluid rounded-lg shadow-lg"
                  />
                  <div className="hero-blob"></div>
                </div>
                <div className="hero-floating-card hero-card-1 shadow">
                  <div className="d-flex align-items-center">
                    <div className="card-icon">
                      <CredentialIcon />
                    </div>
                    <div className="ms-3">
                      <h6 className="mb-0">可验证凭证</h6>
                      <small>基于W3C标准</small>
                    </div>
                  </div>
                </div>
                <div className="hero-floating-card hero-card-2 shadow">
                  <div className="d-flex align-items-center">
                    <div className="card-icon">
                      <ZKPIcon />
                    </div>
                    <div className="ms-3">
                      <h6 className="mb-0">零知识证明</h6>
                      <small>保护用户隐私</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 统计数字 */}
      <section className="py-5">
        <div className="container">
          <div className="stats-container">
            <div className="row text-center">
              <div className="col-md-4 mb-4 mb-md-0">
                <div className="stat-item">
                  <div className="stat-value">10,000+</div>
                  <div className="stat-label">发行的凭证</div>
                </div>
              </div>
              <div className="col-md-4 mb-4 mb-md-0">
                <div className="stat-item">
                  <div className="stat-value">500+</div>
                  <div className="stat-label">发行机构</div>
                </div>
              </div>
              <div className="col-md-4">
                <div className="stat-item">
                  <div className="stat-value">25,000+</div>
                  <div className="stat-label">持证用户</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 核心功能 */}
      <section className="section features-section">
        <div className="container">
          <h2 className="section-title">核心技术</h2>
          <div className="row g-4">
            <div className="col-lg-3 col-md-6">
              <div className="feature-card card h-100">
                <div className="feature-icon">
                  <IdentityIcon />
                </div>
                <h5 className="card-title">去中心化身份 (DID)</h5>
                <p className="card-text">
                  实现符合W3C DID Core v1.0规范的DID方法，支持did:polygonid和did:ethr
                </p>
              </div>
            </div>
            <div className="col-lg-3 col-md-6">
              <div className="feature-card card h-100">
                <div className="feature-icon">
                  <CredentialIcon />
                </div>
                <h5 className="card-title">可验证凭证 (VC)</h5>
                <p className="card-text">
                  遵循W3C VC Data Model v2.0标准，确保凭证的可验证性和完整性
                </p>
              </div>
            </div>
            <div className="col-lg-3 col-md-6">
              <div className="feature-card card h-100">
                <div className="feature-icon">
                  <ZKPIcon />
                </div>
                <h5 className="card-title">零知识证明 (ZKP)</h5>
                <p className="card-text">
                  通过Polygon ID集成zk-SNARKs实现选择性披露，保护用户隐私
                </p>
              </div>
            </div>
            <div className="col-lg-3 col-md-6">
              <div className="feature-card card h-100">
                <div className="feature-icon">
                  <RevokeIcon />
                </div>
                <h5 className="card-title">凭证撤销机制</h5>
                <p className="card-text">
                  支持W3C Bitstring Status List v1.0和Polygon ID原生撤销机制
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 系统组件 */}
      <section className="section bg-light components-section">
        <div className="container">
          <h2 className="section-title">系统组件</h2>
          <div className="row g-4 align-items-stretch">
            <div className="col-lg-4 col-md-6 d-flex">
              <div className="card component-card h-100 w-100">
                <div className="card-body d-flex flex-column">
                  <div className="component-icon mb-4">
                    <WalletIcon />
                  </div>
                  <h3 className="component-title">EduVerse钱包</h3>
                  <p className="card-text flex-grow-1">
                    用户管理数字身份与凭证的应用。您可以创建DID、存储凭证、生成证明以及展示您的数字凭证，全方位保护您的数据安全。
                  </p>
                  <div className="component-features mb-4">
                    <div className="feature-tag">凭证存储</div>
                    <div className="feature-tag">选择性披露</div>
                    <div className="feature-tag">身份管理</div>
                  </div>
                  <Link to="/wallet" className="btn btn-primary mt-auto">
                    进入钱包
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-6 d-flex">
              <div className="card component-card h-100 w-100">
                <div className="card-body d-flex flex-column">
                  <div className="component-icon mb-4">
                    <IssuerIcon />
                  </div>
                  <h3 className="component-title">发行方门户</h3>
                  <p className="card-text flex-grow-1">
                    凭证发行与管理界面。作为发行机构，您可以创建Schema、发行凭证并管理撤销状态，帮助您构建可信的数字凭证生态系统。
                  </p>
                  <div className="component-features mb-4">
                    <div className="feature-tag">发行凭证</div>
                    <div className="feature-tag">Schema管理</div>
                    <div className="feature-tag">撤销控制</div>
                  </div>
                  <Link to="/issuer" className="btn btn-primary mt-auto">
                    进入门户
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-lg-4 col-md-6 d-flex">
              <div className="card component-card h-100 w-100">
                <div className="card-body d-flex flex-column">
                  <div className="component-icon mb-4">
                    <VerifierIcon />
                  </div>
                  <h3 className="component-title">验证方接口</h3>
                  <p className="card-text flex-grow-1">
                    凭证验证与查询API。作为验证方，您可以创建证明请求、验证凭证并查询状态，为您的应用程序提供安全可靠的验证服务。
                  </p>
                  <div className="component-features mb-4">
                    <div className="feature-tag">创建请求</div>
                    <div className="feature-tag">验证凭证</div>
                    <div className="feature-tag">查询API</div>
                  </div>
                  <Link to="/verifier" className="btn btn-primary mt-auto">
                    进入接口
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 使用案例 */}
      <section className="section use-cases-section">
        <div className="container">
          <h2 className="section-title">应用场景</h2>
          
          <div className="row align-items-center mb-5 use-case">
            <div className="col-lg-6 mb-4 mb-lg-0">
              <h3 className="use-case-title">教育机构发行学位证书</h3>
              <p className="mb-4">
                大学可以通过EduVerse Credentials发行数字学位证书，学生可以安全地存储这些凭证，并在需要时选择性地向雇主披露信息，如学位类型和专业，而无需透露其他敏感信息。
              </p>
              <div className="use-case-features">
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>更高的凭证可信度</span>
                </div>
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>减少学历造假</span>
                </div>
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>自主控制个人信息</span>
                </div>
              </div>
            </div>
            <div className="col-lg-6">
              <div className="img-wrapper">
                <img
                  src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
                  alt="教育凭证场景"
                  className="img-fluid rounded-lg"
                />
              </div>
            </div>
          </div>
          
          <div className="row align-items-center use-case">
            <div className="col-lg-6 order-lg-2 mb-4 mb-lg-0">
              <h3 className="use-case-title">专业认证与就业验证</h3>
              <p className="mb-4">
                职业培训机构可以发行专业认证凭证，求职者能够在面试时提供ZKP证明，证明自己拥有特定的技能和资质，而雇主可以即时验证这些信息的真实性，无需繁琐的背景调查。
              </p>
              <div className="use-case-features">
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>简化招聘流程</span>
                </div>
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>保护个人敏感信息</span>
                </div>
                <div className="use-case-feature">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L22 4" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    <path d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16" stroke="#00C853" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>即时验证资质</span>
                </div>
              </div>
            </div>
            <div className="col-lg-6 order-lg-1">
              <div className="img-wrapper">
                <img
                  src="https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
                  alt="职业凭证场景"
                  className="img-fluid rounded-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* CTA区域 */}
      <section className="cta-section text-center">
        <div className="container">
          <div className="cta-container">
            <h2 className="cta-title mb-4">开始使用EduVerse Credentials</h2>
            <p className="cta-description mb-5">
              无论您是教育机构、企业还是个人用户，加入EduVerse生态系统，体验去中心化凭证的力量
            </p>
            <div className="d-flex justify-content-center gap-3">
              <Link to="/wallet" className="btn btn-primary btn-lg px-4">
                创建钱包
              </Link>
              <Link to="/issuer" className="btn btn-outline-secondary btn-lg px-4">
                成为发行方
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default HomePage; 